<template>
    <div>
        <s-Home>
            <Row :gutter="16">
                <i-col span="6">
                    <Card Shadow title="进货量">
                        <Tooltip content="当日进货件数" slot="extra" placement="top" transfer>
                            <Tag color="green">件</Tag>
                        </Tooltip>
                        <div class="count">
                            {{today_purchase_quantity}}
                        </div>
                    </Card>
                </i-col>

                <i-col span="6">
                    <Card Shadow title="销量">
                        <Tooltip content="当日出货件数" slot="extra" placement="top" transfer>
                            <Tag color="#3399ff">件</Tag>
                        </Tooltip>
                        <div class="count">
                            {{today_shipment_quantity}}
                        </div>
                    </Card>
                </i-col>

                <i-col span="6">
                    <Card Shadow title="当日流水">
                        <Tooltip content="当日流水金额" slot="extra" placement="top" transfer>
                            <Tag color="#00cc66">元</Tag>
                        </Tooltip>

                        <div class="count">
                            ¥ {{today_sales_money}}
                        </div>
                    </Card>
                </i-col>

                <i-col span="6">
                    <Card Shadow title="毛利润">
                        <Tooltip content="当日营收毛利润" slot="extra" placement="top" transfer>
                            <Tag color="#E94136">元</Tag>
                        </Tooltip>

                        <div class="count">
                            ¥ {{today_profit}}
                        </div>
                    </Card>
                </i-col>
            </Row>

            <Card shadow style="margin-top: 16px;">
                <Tabs value="sell">
                    <TabPane label="近一周销售额" name="sell">
                        <Row>
                            <i-col span="16">
                                <sales_bar></sales_bar>
                            </i-col>
                            <i-col span="8">
                                <category_pie></category_pie>
                            </i-col>
                        </Row>
                    </TabPane>
                    <TabPane label="毛利润" name="money">
                        <profit_line></profit_line>
                    </TabPane>
                </Tabs>
            </Card>
        </s-Home>
    </div>
</template>

<script>
    import api from '../network/api/inventory'
    export default {
        name: 'app',

        data() {
            return {
                today_purchase_quantity:'0',
                today_shipment_quantity:'0',
                today_sales_money:'0',
                today_profit:'0'
            };
        },

        mounted() {

            this.getDay();
        },

        methods: {
        
            getDay() {
               
                api.getToday().then(res => {
                    console.log(res.data)
                    this.today_purchase_quantity=res.data[0].today_purchase_quantity;
                    this.today_shipment_quantity=res.data[0].today_shipment_quantity;
                    this.today_sales_money=res.data[0].today_sales_money;
                    this.today_profit=res.data[0].today_profit;
                    
                });
                 
            }

            // initEchart() {
            //     let myChart = this.$echarts.init(this.$refs.chart)
            //     // 绘制图表
            //     myChart.setOption({


            //     });

            // }
        },
    };
</script>

<style scoped>
    .count {
        text-align: center;
        font-size: 35px;

    }

    .echarts-box {}
</style>